<template>
  <div>
    <h2>商铺信息</h2>
    <img :src="shopMsg.url" alt="商铺头像">
    <input type="text" v-model="shopMsg.shopName">
    <textarea cols="30" rows="10" placeholder="商铺描述" v-model="shopMsg.shopDescription" ></textarea>
    <input type="button" value="提交" @click="alterMsg">
  </div>
</template>

<script>
export default {
    data() {
        return {
            shopMsg:{
                url:'http://localhost:8080/shop/getShopImg/1',
                shopName:'',
                shopDescription:''
            }
        }
    },
    methods:{
        // 获取店铺信息
        getShopMsg(){
            // 获取店铺名
            this.$axios({
                method:'get',
                url:'http://localhost:8080/shop/getShopName/1'
            }).then(res=>{
                this.shopMsg.shopName = res.data
            },err=>{
                console.log(err);
            })
            // 获取店铺简介
            this.$axios({
                method:'get',
                url:'http://localhost:8080/shop/getShopDescription/1'
            }).then(res=>{
                this.shopMsg.shopDescription = res.data
            })
        },
        // 更新店铺信息
        alterMsg(){
            this.$axios({
                method:'post',
                url:'http://localhost:8080/shop/alterShopMsg',
                data:{
                    id:1,
                    shopName:this.shopMsg.shopName,
                    shopDescription:this.shopMsg.shopDescription
                }
            }).then(res=>{
                if(!res.data) {
                    alert("提交失败！")
                }
                // 刷新页面
                this.$router.go(0)
            })
        }
    },
    mounted(){
        // 获取店铺信息
        this.getShopMsg()
    }
}
</script>

<style scoped>
h2 {
    text-align: center;
    color: dimgrey;
    margin: 20px 0;
}
img {
    height: 300px;
    width: 300px;
    float: left;
    margin-left: 20px;
    margin-right: 20px;
}
input {
    display: block;
    margin-left: 20px;
    text-align: center;
    height: 30px;
    width: 300px;
}
textarea {
    resize:none;
    margin: 20px 0 0 0;
    text-align: center;
    height: 200px;
    width: 300px;
}
input[type='button'] {
    float: right;
    height: 100px;
    margin: 20px 0;
}
</style>